<template>
  <div>
    <div class="operator-area">
      <div class="search-container">
        <div class="search-item">
          <a-input
            :allowClear="true"
            v-model="queryParams.name"
            placeholder="项目名称" />
        </div>
        <div class="search-item">
          <a-input
            :allowClear="true"
            v-model="queryParams.code"
            placeholder="项目编码" />
        </div>
        <div class="search-item">
          <year-select
            style="width: 100px;"
            v-model="queryParams.lxnd"
            placeholder="立项年度">
          </year-select>
        </div>
        <div class="search-item">
          <a-button type="primary">查询</a-button>
          <a-button >重置</a-button>
        </div>
      </div>
    </div>
    <div class="table-area">
      <a-table
        rowKey="id"
        bordered
        :key="tableSetting.key"
        :columns="tableColumns"
        :loading="tableSetting.loading"
        :dataSource="tableDataSource"
        :pagination="false"
        :rowSelection="{
          selectedRowKeys: tableSetting.selectedRowKeys,
          onChange: onTabalRowChange
        }">
       </a-table>
    </div>
    <div class="code-area">
      <a-card :bodyStyle="{ height: '500px', overflow: 'auto' }">
        <a-row>
          <a-col :span="12">
            <span>查询参数：</span>
            <pre>{{ queryParams }}</pre>
          </a-col>
          <a-col :span="12">
            <pre></pre>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>

export default {
  name: "SearchAreaTable",
  components: {},
  mounted () {
  },
  data () {
    return {
      queryParams: {
        name: "",
        code: "",
        lxnd: 2020,
      },
      tableSetting: {
        key: +new Date(),
        loading: false,
        pagination: {},
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      tableColumns: [
        {
          title: "项目名称",
          dataIndex: "name",
          width: 250,
          align: "left",
        },
        {
          title: "项目编码",
          dataIndex: "code",
          width: 250,
          align: "left",
        },
        {
          title: "项目类型",
          dataIndex: "type",
          width: 200
        },
        {
          title: "项目地址",
          dataIndex: "addr",
          width: 150
        },
        {
          title: "负责人",
          dataIndex: "fzUser",
          width: 150
        },
        {
          title: "立项年度",
          dataIndex: "lxnd",
          width: 150,
        },
        {
          title: "建设性质",
          dataIndex: "jsxz",
          width: 100,
          customRender: (text, record, index) => {
            return record.jsxzText
          },
        }
      ],
      tableDataSource: [
        {
          id: 1,
          name: "建设项目1", 
          type: "3",
          typeText: "收费公路",
          code: "132664974474",
          addr: "北京市",
          addrVisible: false,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
          SR2020: "0.00",
          ZC2020: "0.00"
        },
        {
          id: 2,
          name: "建设项目2", 
          type: "5",
          typeText: "民用机场",
          code: "132664978874",
          addr: "天津市",
          addrVisible: true,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
          SR2020: "0.00",
          ZC2020: "0.00"
        }
      ],
      defaultYear: new Date().getFullYear(),
      addColNum: 0
    }
  },
  methods: {
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  .search-item {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
